<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery基本写法</title>
    <!-- 引入依赖 -->
    <script src="JS/jquery-3.7.1.min.js"></script>
</head>
<body>
    <!-- <div id="content">
        <span id="ele">页面元素</span>
    </div>

    <input type="text" id="name" value="input"> -->

    <!-- <a href="https://www.baidu.com">百度</a> -->

    <!-- <div style="font-size: 40px">这是一个div</div> -->

    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>

    <script>
        $(document).ready(function(){
            // 添加
            // $("ol").append("append");
            // $("ol").prepend("prepend");
            // $("ol").after("after");
            // $("ol").before("before");            

            // 删除
            // $("ol").remove(); // 会把所有的都删除
            $("ol").empty(); // 只删除ol里面的内容

            // $("#content").click(function(){
            //     // 获得页面内容
            //     console.log($("#content").text()); // 不能获得 html 标签
            //     console.log($("#content").html()); // 会返回带有 html 标签的内容
            //     console.log($("#name").val()); // val是用来获取文本的

            //     // 修改页面元素
            //     //console.log($("#content").text("<h1>我是点击后的内容</h1>")); // 这个不会根据<h1>标签进行更改
            //     console.log($("#content").html("<h1>我是点击后的内容</h1>")); //会进行更改
            //     console.log($("#name").val(1111111)); // val是用来获取文本的
            // });

            // 获取/设置元素属性 —— attr
            // console.log($("a").attr("href"));
            // $("a").attr("href","https://www.youdao.com");

            // 操作css
            // console.log($("div").css("font-size"));
            // $("div").css("font-size", "16px");


            // $(document).ready(function(){
            //     alert("页面加载完成");
            // });

            // $("button").click(function(){
            //     alert("点击弹框");
            //});
        });
        
    </script>
</body>
</html>